<template>
  <a-modal
    title="新增家庭成员"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item style="display: none;" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input v-decorator="['childId']" />
        </a-form-item>
        <a-form-item label="与幼儿关系" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-select
            allowClear
            placeholder="请选择！"
            v-decorator="['relationship', { rules: [{ required: true, message: '请选择！' }] }]"
          >
            <a-select-option v-for="item in relationList" :key="item.id" :value="item.id">{{
              item.label
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder="请输入姓名"
            v-decorator="['name', { rules: [{ required: true, message: '请输入姓名！' }] }]"
          />
        </a-form-item>

        <a-form-item label="手机" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入手机"
            v-decorator="[
              'phoneNumber',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入手机号！',
                    pattern: /^1[34578]\d{9}$/,
                    message: '请输入正确的手机号'
                  }
                ]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="工作单位" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入工作单位"
            v-decorator="['workplace', { rules: [{ required: false, message: '请输入工作单位！' }] }]"
          />
        </a-form-item>
        <a-form-item label="学历" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-select
            allowClear
            placeholder="请选择学历！"
            v-decorator="['degree', { rules: [{ required: false, message: '请选择学历！' }] }]"
          >
            <a-select-option v-for="item in degreeList" :key="item.id" :value="item.id">{{
              item.label
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { parentAdd, degreeList, relationList } from '@/api/modular/parent/parentManage'
import moment from 'moment'
export default {
  props: {},
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),

      dateFormat: 'YYYY-MM-DD',
      degreeList: [],
      relationList: []
    }
  },
  created() {
    this.degreeList = degreeList()
    this.relationList = relationList()
  },
  methods: {
    // 初始化方法
    add(id) {
      this.visible = true
      setTimeout(() => {
        this.form.setFieldsValue({
          childId: id
        })
      }, 100)
    },

    classroomchange(val) {
      console.log(val)
      let _classroom = this.classroom1.find(item => {
        return item.id === val
      })
      this.classroomName = _classroom.cRoomName
    },

    handleSubmit() {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          parentAdd(values)
            .then(res => {
              if (res.success) {
                this.$message.success('新增成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('新增失败：' + res.message)
              }
            })
            .finally(res => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>
